<template>
  <h1 v-if="route.path==='/home/addMedicine'">添加药品</h1>
  <h1 v-else>修改药品</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">

    <el-form-item label="药品名称" prop="medicineName">
      <el-input v-model="form.data.medicineName" placeholder="请输入药品名称" style="width: 218px;" />
    </el-form-item>

    <el-form-item label="药品类型" prop="medicineType">
      <el-select v-model="form.data.medicineType" placeholder="请选择药品类型">
        <el-option v-for="item in medicineTypes.data"
                   :key="item.medicineType"
                   :label="item.medicineType"
                   :value="item.medicineType" />
      </el-select>
    </el-form-item>


    <el-form-item label="药品价格" prop="price">
      <el-input v-model="form.data.price" placeholder="请输入药品价格" style="width: 218px;" />
    </el-form-item>
    <!--    <el-row>
          <el-col :span="6">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="form.data.medicineType" placeholder="请选择所属部门">
                <el-option v-for="item in positions.data"
                           :key="item.departmentId"
                           :label="item.departmentName"
                           :value="item.departmentId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->

    <el-form-item label="录入数量" prop="number">
      <el-input v-model="form.data.number" placeholder="请输入药品的录入数量" style="width: 218px;" />
    </el-form-item>


    <el-form-item label="单位" prop="unit">
      <el-select v-model="form.data.unit" placeholder="请选择单位">
        <el-option v-for="item in units.data"
                   :key="item.unit"
                   :label="item.unit"
                   :value="item.unit" />
      </el-select>
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)" v-if="route.path==='/home/addMedicine'">添加</el-button>
      <el-button v-else type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref, toRaw, toRefs, unref } from "vue";
import {
  addEmployee,
  deleteEmployeeById,
  getDepartmentNameId,
  getEmployeeOne,
  login,
  updateEmployee
} from "@/utils/api";
import {
  addMedicine,
  getMedicineDataOne,
  getMedicineType,
  getMedicineUnit,
  updateMedicine
} from "@/utils/MedicineRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute();

const form = reactive({
  data: {
    "medicineName": "",
    "medicineType": "",
    "number": "",
    "unit": "",
    "price": ""
  }
});


const positions = reactive({
  data: [
    {
      position: "实习生"
    },
    {
      position: "正式员工"
    }
  ]
});
//表单校验规则
const rules = reactive({
  medicineName: [
    { required: true, message: "请输入药品名称", trigger: "blur" },
    { min: 2, max: 10, message: "药品名称长度为2~10", trigger: "blur" }
  ],
  number: [
    { required: true, message: "请输入药品录入的数量", trigger: "blur" }
  ],
  medicineType: [
    { required: true, message: "请输入药品类型", trigger: "blur" }
  ],
  unit: [
    { required: true, message: "请输入单位", trigger: "blur" }
  ],
  price: [
    { required: true, message: "请输入药品的价格", trigger: "blur" }
  ]

});


const ruleFormRef = ref();


//重置
const reset = () => {
  form.data = {};
};

onMounted(() => {
  getMedicineTypeOptionData();
  getMedicineUnitOptionData();
  if (route.path !== "/home/addMedicine") {
    getMedicineData();
  }
});

const medicineTypes = reactive({
  data: []
});
const units = reactive({
  data: []
});
//获取药品类别
const getMedicineTypeOptionData = async () => {
  let res = await getMedicineType();
  medicineTypes.data = res.data;
};
//获取药品类别
const getMedicineUnitOptionData = async () => {
  let res = await getMedicineUnit();
  units.data = res.data;
};

//发送添加请求
const addMedicineRequest = async (fromDate) => {
  let res = await addMedicine(fromDate);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功成功"
    });
    router.push({
      path: "/home/medicine"
    });
  }
};

//回显要修改员工的数据
const getMedicineData = async () => {
  let res = await getMedicineDataOne(route.query.id);
  form.data = res.data;
  form.data.price = res.data.price / 100;
};


//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      if (route.path === "/home/addMedicine") {
        addMedicineRequest(form.data);
      } else {
        ElMessageBox.confirm(
          "确定要修改吗?",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            //发送修改的请求
            let res = await updateMedicine(form.data);
            if (res.data) {
              ElMessage({
                type: "success",
                message: "修改成功"
              });
              router.push({
                path: "/home/medicine"
              });
            } else {
              ElMessage({
                type: "error",
                message: "修改失败"
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消修改"
            });
          });
      }
    }
  });
};

</script>


<style scoped>
</style>